<template>
  <div>
    <div class="body-box">
      <div>
        <window-title title="筛选"></window-title>
        <!-- 筛选 -->
        <div class="search-box">
          <el-form size="mini" :inline="true">
            <el-form-item label="关键字">
              <el-input v-model="name" placeholder="请输入会员名、ID关键字搜索"></el-input>
            </el-form-item>
            <!-- <el-form-item label="会员等级">
              <el-select v-model="level">
                <el-option
                  v-for="item in level_list"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="性别">
              <el-select v-model="sex">
                <el-option
                  v-for="item in sex_list"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="入会时间">
              <el-date-picker
                v-model="times"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd HH:mm:ss"
              ></el-date-picker>
            </el-form-item>-->
            <el-form-item>
              <el-button icon="el-icon-search" class="com-btn" @click="search()">查询</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div v-loading="loading">
        <window-title title="列表"></window-title>
        <!-- tab选项卡 -->
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane name="0">
            <span slot="label">
              全部
              <span class="tab-badge">{{all}}</span>
            </span>
          </el-tab-pane>
          <el-tab-pane name="3">
            <span slot="label">
              高级会员
              <span class="tab-badge">{{svip}}</span>
            </span>
          </el-tab-pane>
          <el-tab-pane name="1">
            <span slot="label">
              普通会员
              <span class="tab-badge">{{vip}}</span>
            </span>
          </el-tab-pane>
          <el-tab-pane name="2">
            <span slot="label">
              待审核高级会员
              <span class="tab-badge">{{verify_svip}}</span>
            </span>
          </el-tab-pane>
          <el-tab-pane name="4">
            <span slot="label">
              过期会员
              <span class="tab-badge">{{out_svip}}</span>
            </span>
          </el-tab-pane>
        </el-tabs>
        <el-table :data="list.data" size="mini" border v-if="!in_load">
          <el-table-column type="index"></el-table-column>
          <el-table-column label="ID" prop="IdCode" width="80px"></el-table-column>
          <el-table-column label="昵称" prop="MemberName" min-width="100px"></el-table-column>
          <!-- <el-table-column label="真实姓名" prop="in_form.name" width="80px"></el-table-column> -->
          <el-table-column label="手机号" prop="Phone" width="100px"></el-table-column>
          <el-table-column label="性别" width="60px">
            <template slot-scope="item">
              <el-tag size="mini" v-if="item.row.Sex == 1">男</el-tag>
              <el-tag size="mini" v-if="item.row.Sex == 0" type="danger">女</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="角色" width="70px">
            <template slot-scope="item">
              <el-tag size="mini" v-if="item.row.ClubRole == 9" type="success">团长</el-tag>
              <el-tag size="mini" v-if="item.row.ClubRole == 5" type="primary">管理员</el-tag>
              <el-tag size="mini" v-if="item.row.ClubRole == 1" type="info">会员</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="入会时间" prop="CreateTime" width="100px"></el-table-column>
          <el-table-column label="会员等级" width="180px">
            <template slot-scope="item">
              <el-tag size="mini" v-if="item.row.VipUser == 0" type="info">普通会员</el-tag>
              <el-tag size="mini" v-if="item.row.VipUser == 1" type="primary">待审核</el-tag>
              <el-tag size="mini" v-if="item.row.VipUser == 2" type="warning">高级会员</el-tag>
              <div v-if="item.row.VipUser == 2">
                <el-tag size="mini" type="danger">有效时间至：{{item.row.EndTime}}</el-tag>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="黑名单" width="60px">
            <template slot-scope="item">
              <el-tag size="mini" v-if="item.row.IsBlackList == 1" type="danger">是</el-tag>
              <el-tag size="mini" v-else type="success">否</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" fixed="right" width="180px">
            <template slot-scope="item">
              <el-button size="mini" @click="toDetail(item.row.MemberId)">详情</el-button>
              <el-dropdown
                size="mini"
                split-button
                style="margin-left:10px"
                @command="userSet($event,item)"
              >
                更多
                <el-dropdown-menu slot="dropdown">
                  <template v-if="item.row.ClubRole != 9">
                    <el-dropdown-item :command="0">{{item.row.IsBlackList == 1 ? '移除黑名单' : '加入黑名单'}}</el-dropdown-item>
                    <el-dropdown-item :command="1">{{item.row.ClubRole == 5 ? '取消管理员' : '设为管理员'}}</el-dropdown-item>
                    <el-dropdown-item v-if="item.row.ClubRole == 5" :command="2">分配角色</el-dropdown-item>
                    <el-dropdown-item v-if="item.row.VipUser == 0" :command="4">标记高级会员</el-dropdown-item>
                  </template>
                </el-dropdown-menu>
              </el-dropdown>
            </template>
          </el-table-column>
        </el-table>
        <div class="page-box">
          <el-pagination
            background
            small
            :current-page="list.current_page"
            :page-size="list.per_page"
            layout="total, prev, pager, next, jumper"
            :total="list.total"
            @current-change="changePage"
          ></el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import windowTitle from "../../components/unit/title.vue";
import userDetail from "./detail.vue";

export default {
  components: { windowTitle, userDetail },
  data() {
    return {
      activeName: "0",
      times: "",
      name: "",
      sex_list: [
        { value: "", label: "全部" },
        { value: 1, label: "男" },
        { value: 0, label: "女" }
      ],
      level_list: [
        { value: "", label: "全部" },
        { value: 1, label: "普通会员" },
        { value: 2, label: "高级会员" }
      ],
      sex: "",
      level: "",
      list: {
        current_page: 1,
        data: []
      },
      loading: true,
      in_load: true,
      all: 0,
      out_svip: 0,
      svip: 0,
      verify_svip: 0,
      vip: 0
    };
  },
  created() {
    if (this.$route.query.activeName != undefined) {
      var temp_data = this.$route.query;
      this.activeName = temp_data.activeName;
      this.times = temp_data.times;
      this.name = temp_data.name;
      this.sex = temp_data.sex;
      this.list = temp_data.list;
      this.level = temp_data.level;
    }
  },
  mounted() {
    this.getData();
  },
  methods: {
    /**
     * 查询
     */
    search() {
      this.list.current_page = 1;
      this.getData();
    },
    /**
     * 会员操作
     */
    userSet(e, data) {
      switch (e) {
        case 0:
          //加入、移除黑名单
          this.ajaxs("user/setBlackList", {
            data: {
              club_id: data.row.ClubId,
              member_id: data.row.MemberId
            },
            success: res => {
              this.toast(res.code, res.msg);
              if (res.code) {
                this.list.data[data.$index].IsBlackList =
                  data.row.IsBlackList == 1 ? 0 : 1;
              }
            }
          });
          break;
        case 1:
          //设为、取消管理员
          this.ajaxs("user/setManage", {
            data: {
              club_id: data.row.ClubId,
              member_id: data.row.MemberId
            },
            success: res => {
              this.toast(res.code, res.msg);
              if (res.code) {
                this.getData();
              }
            }
          });
          break;
        case 2:
          //分配权限
          break;
        case 4:
          this.$confirm("确定标记该会员为高级会员?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
            .then(() => {
              this.ajaxs("user/signSvip", {
                data: { member_id: data.row.MemberId },
                success: res => {
                  this.toast(res.code, res.msg);
                  if (res.code) this.getData();
                }
              });
            })
            .catch(() => {});
          break;
      }
    },
    /**
     * 分页
     */
    changePage(e) {
      console.log(e);
      this.list.current_page = e;
      this.getData();
    },
    /**
     * 获取会员列表
     */
    getData() {
      this.loading = true;
      this.ajaxs("user/userList", {
        data: {
          page: this.list.current_page,
          Checked: parseInt(this.activeName),
          name: this.name,
          times: this.times,
          sex: this.sex,
          level: this.level
        },
        success: res => {
          this.in_load = false;
          this.loading = false;
          this.list = res.msg.list;
          this.all = res.msg.all;
          this.out_svip = res.msg.out_svip;
          this.vip = res.msg.vip;
          this.verify_svip = res.msg.verify_svip;
          this.svip = res.msg.svip;
        }
      });
    },
    /**
     * tab选项卡点击事件
     */
    handleClick(e) {
      this.list.current_page = 1;
      this.getData();
    },
    /**
     * 会员详情
     */
    toDetail(member_id) {
      this.$router.push({
        path: "/manage/user/list/detail/" + member_id,
        query: {
          activeName: this.activeName,
          list: this.list,
          sex: this.sex,
          name: this.name,
          times: this.times,
          level: this.level
        }
      });
      localStorage.setItem(
        "router_query",
        JSON.stringify({
          path: "/manage/user/list",
          query: {
            activeName: this.activeName,
            list: this.list,
            sex: this.sex,
            name: this.name,
            times: this.times,
            level: this.level
          }
        })
      );
    }
  }
};
</script>

<style>
.search-input {
  display: inline-block;
  width: 200px;
  margin-right: 20px;
}
</style>